import { createFileRoute } from '@tanstack/react-router'
import React, { useState, useEffect } from 'react';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Alert } from '@/components/ui/alert';
import { Github, Twitter, Lock, Mail, Eye, EyeOff } from 'lucide-react';
import { cn } from '@/lib/utils';

export const Route = createFileRoute('/auth/login')({
  component: RouteComponent,
});

function RouteComponent() {
  // 表单状态管理
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [rememberMe, setRememberMe] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [mounted, setMounted] = useState(false);

  // 页面加载动画效果
  useEffect(() => {
    setMounted(true);
  }, []);

  // 登录处理函数
  const handleLogin = (e) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');
    setSuccess('');

    // 表单验证
    if (!email || !password) {
      setError('请填写所有必填字段');
      setIsLoading(false);
      return;
    }

    // 模拟API请求
    setTimeout(() => {
      setIsLoading(false);
      setSuccess('登录成功！正在跳转...');
      // 实际项目中这里会处理真实的登录逻辑
    }, 1500);
  };

  return (
    <div className="min-h-screen w-full flex flex-col overflow-hidden">
      {/* 科技感背景 */}
      <div 
        className="fixed inset-0 z-0 bg-[#0a0a12]"
        style={{
          backgroundImage: `
            radial-gradient(circle at 20% 30%, rgba(66, 220, 195, 0.15) 0%, transparent 30%),
            radial-gradient(circle at 80% 70%, rgba(101, 92, 231, 0.15) 0%, transparent 30%),
            linear-gradient(to bottom, rgba(10, 10, 18, 1), rgba(10, 10, 18, 0.95))
          `
        }}
      >
        {/* 网格线装饰 */}
        <div className="absolute inset-0 opacity-10">
          <div className="h-full w-full bg-[url('')] bg-repeat"
          />
        </div>
      </div>

      {/* 主内容区 */}
      <main className="relative z-10 flex flex-col items-center justify-center min-h-screen w-full px-4 sm:px-6 lg:px-8 py-12">
        {/* 标题部分 */}
        <div 
          className="text-center mb-8 space-y-2"
          style={{
            opacity: mounted ? 1 : 0,
            transform: mounted ? 'translateY(0)' : 'translateY(20px)',
            transition: 'opacity 0.6s ease-out, transform 0.6s ease-out'
          }}
        >
          <h1 className="text-4xl sm:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-cyan-400">
            Share Movie
          </h1>
          <p className="text-gray-400 max-w-md mx-auto">
            登录您的账号，发现并分享精彩电影
          </p>
        </div>

        {/* 登录卡片 */}
        <Card 
          className="w-full max-w-md border border-gray-800 bg-gray-900/70 backdrop-blur-md shadow-2xl"
          style={{
            opacity: mounted ? 1 : 0,
            transform: mounted ? 'translateY(0)' : 'translateY(30px)',
            transition: 'opacity 0.8s ease-out, transform 0.8s ease-out',
            transitionDelay: '0.2s'
          }}
        >
          <div className="p-6 sm:p-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl font-semibold text-white">欢迎回来</h2>
              <p className="text-gray-400 mt-1">请使用您的账号登录</p>
            </div>

            {/* 提示信息 */}
            {error && (
              <Alert className="mb-4 bg-red-900/20 text-red-400 border-red-900">
                {error}
              </Alert>
            )}
            {success && (
              <Alert className="mb-4 bg-emerald-900/20 text-emerald-400 border-emerald-900">
                {success}
              </Alert>
            )}

            {/* 登录表单 */}
            <form onSubmit={handleLogin} className="space-y-4">
              {/* 邮箱输入 */}
              <div className="space-y-2">
                <Label htmlFor="email" className="text-gray-300">邮箱</Label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                    <Mail className="h-4 w-4 text-gray-500" />
                  </div>
                  <Input
                    id="email"
                    type="email"
                    placeholder="your@email.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="pl-10 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus:border-emerald-500"
                    required
                  />
                </div>
              </div>

              {/* 密码输入 */}
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label htmlFor="password" className="text-gray-300">密码</Label>
                  <a href="#" className="text-sm text-emerald-500 hover:text-emerald-400 transition-colors">忘记密码？</a>
                </div>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                    <Lock className="h-4 w-4 text-gray-500" />
                  </div>
                  <Input
                    id="password"
                    type={showPassword ? "text" : "password"}
                    placeholder="••••••••"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="pl-10 pr-10 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus:border-emerald-500"
                    required
                  />
                  <button
                    type="button"
                    className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-white transition-colors"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </button>
                </div>
              </div>

              {/* 记住我和登录按钮 */}
              <div className="space-y-4 pt-2">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="remember"
                    checked={rememberMe}
                    onCheckedChange={(checked) => setRememberMe(checked)}
                    className="border-gray-700 data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
                  />
                  <Label htmlFor="remember" className="text-sm text-gray-300 cursor-pointer">记住我</Label>
                </div>

                <Button
                  type="submit"
                  disabled={isLoading}
                  className="w-full py-6 bg-gradient-to-r from-emerald-600 to-cyan-600 hover:from-emerald-500 hover:to-cyan-500 text-white font-medium shadow-lg shadow-emerald-500/20 transition-all duration-300"
                >
                  {isLoading ? (
                    <div className="flex items-center justify-center space-x-2">
                      <div className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full" />
                      <span>登录中...</span>
                    </div>
                  ) : (
                    "登录"
                  )}
                </Button>
              </div>
            </form>

            {/* 分隔线 */}
            <div className="relative my-6">
              <div className="absolute inset-0 flex items-center">
                <div className="w-full border-t border-gray-800" />
              </div>
              <div className="relative flex justify-center text-sm">
                <span className="px-2 bg-gray-900 text-gray-500">或者通过以下方式登录</span>
              </div>
            </div>

            {/* 社交媒体登录 */}
            <div className="grid grid-cols-2 gap-3">
              <Button
                type="button"
                className="flex items-center justify-center gap-2 border border-gray-800 bg-gray-800/50 hover:bg-gray-800 text-white"
              >
                <Github className="h-4 w-4" />
                <span className="hidden sm:inline">GitHub</span>
              </Button>
              <Button
                type="button"
                className="flex items-center justify-center gap-2 border border-gray-800 bg-gray-800/50 hover:bg-gray-800 text-white"
              >
                <Twitter className="h-4 w-4" />
                <span className="hidden sm:inline">Twitter</span>
              </Button>
            </div>

            {/* 注册链接 */}
            <div className="text-center mt-6 text-sm text-gray-400">
              还没有账号？
              <a href="#" className="text-emerald-500 hover:text-emerald-400 transition-colors ml-1">立即注册</a>
            </div>
          </div>
        </Card>

        {/* 页脚 */}
        <footer className="mt-8 text-center text-gray-500 text-sm">
          <p>© 2023 Share Movie. All rights reserved.</p>
        </footer>
      </main>
    </div>
  );
}
